<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/30
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/include.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="js/echarts.js"></script>


    <script type="text/javascript">
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            proReport();


            function proReport() {
                var demandType = $("#demandType").val();
                var url = "proReport.html";
                var args = {
                    "demandType": demandType
                };

                //加载进度条
                layer.load(2, {
                    shade: [0.2, '#999999'] //0.1透明度的白色背景
                });
                $.post(url, args, function (data) {
                    data = jQuery.parseJSON(data);

                    var legend8 = '待处理('+data.sum8+')';
                    var legend9 = '处理中('+data.sum9+')';
                    var legend10 = '已处理('+data.sum10+')';

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '开发人员工作量统计'
                        },
                        //移动到柱子显示数据
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            },
                            optionToContent:function(opt) {
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var table ='<table id="test" class="table-bordered table-striped" style="width:100%;text-align:center">';
                                table = table + '<tbody><tr>'+ '<td>开发人员</td>'+ '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>'+ '<td>' + series[2].name + '</td>' + '</tr>';
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>'+ '<td>' + series[2].data[i] + '</td>'+ '</tr>';
                                }
                                table += '</tbody>';
                                return table;
                            }
                        },
                        legend: {
                            data: [legend8, legend9, legend10],
//                            selected: {
//                                '处理中': false
//                            }
                        },
                        xAxis: {
                            data: data.proStr
                        },
                        yAxis: [{type: 'value'}],
                        calculable: true,
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        series: [
                            {
                                name: legend8,
                                type: 'bar',
                                data: data.proData8Str
                            },
                            {
                                name: legend9,
                                type: 'bar',
                                data: data.proData9Str
                            },
                            {
                                name: legend10,
                                type: 'bar',
                                data: data.proData10Str
                            },
                        ]
                    };
                    layer.closeAll('loading');
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                });

            }

            $("#demandType").change(function () {
                proReport()
            });
        });

    </script>
</head>
<body>
<div class="form-group" style="margin-top: 15px;margin-bottom: 10px;">

    <select id="demandType" style="width: 150px;margin-top: 5px;margin-left: 5px"
            class="form-control">
        <option>
            全部类型
        </option>
        <option value="1">
            需求
        </option>
        <option value="2">
            BUG
        </option>
    </select>

</div>
<p>

</p>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 95%;height:90%;margin-top: 30px"></div>
</body>


</html>
